<template>
  <div class="matlab-bar clearfix">
    <div class="block variable">
      <div class="top dis-flex">
        <div class="column" @click="saveVariable">
          <div class="icon-save-workspace icon-style" />
          <div>保存<br>工作区</div>
        </div>
        <div class="pos-rel">
          <div
            id="menuOpenF"
            class="row clearfix"
            :class="{ active: activeBtn === 'menuOpen' }"
            @click="openVariableList"
          >
            <div class="fl icon-edit-variable icon-style-small" />
            <span class="fl">&nbsp;打开变量&nbsp;</span>
            <i class="fl el-icon-caret-bottom" />
          </div>
          <variable-list
            ref="menuOpen"
            class="menu-position"
            :variable-list="this.$store.getters['matlab/getProcessedVariables']"
          />
          <div class="row clearfix" @click="clearWorkspace">
            <div
              class="fl matlab-icon2 icon-clear-variable icon-style-small"
            />
            <span class="fl">&nbsp;清空 工作区&nbsp;</span>
            <i class="fl el-icon-caret-bottom" />
          </div>
        </div>
      </div>
      <div class="desc">变量</div>
      <div class="right-line" />
    </div>
  </div>
</template>

<script>
import VariableList from '../dropdown-menu/VariableList.vue';
import { saveWorkspace } from '@/utils/variable';
export default {
  name: 'VariableBar',
  components: {
    VariableList
  },
  data() {
    return {
      activeBtn: ''
    };
  },
  methods: {
    todo() {
      this.$message.info('二期开发');
    },
    saveVariable() {
      saveWorkspace(this.$store.state.matlab.variableArray);
    },
    clearWorkspace() {
      this.$confirm('确认清空工作区?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('matlab/clearVariables');
      }).catch((err) => {
        console.error(err);
      });
    },
    openVariableList() {
      setTimeout(() => {
        this.activeBtn = 'menuOpen';
        this.$refs.menuOpen.show();
        document.body.addEventListener('click', this.menuClose);
      }, 100);
    },
    menuClose(e) {
      var sp = document.getElementById(this.activeBtn + 'F');
      if (sp) {
        if (!sp.contains(e.target)) {
          try {
            this.$refs[this.activeBtn].hide();
            this.activeBtn = '';
            document.body.removeEventListener('click', this.menuClose);
          } catch (e) {
            document.body.removeEventListener('click', this.menuClose);
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.menu-position {
  position: absolute;
  top: 23px;
  left: 0;
}
</style>
